@import '@/styles/common/variables.scss';
#FAQ{
  >div{
    max-width: 75vw;
    margin: 0 auto;
    padding-top: 32px;
  }
  .FAQ_category{
    background-color: #ffffff;
    width: 192px;
    position: fixed;
    top: 88px;
    >p{
      height: 56px;
      line-height: 56px;
      color: #363434;
      font-size: 14px;
      padding-left: 16px;
      cursor: pointer;
      &.active,
      &:hover{
        font-weight: bold;
      }
    }
  }
  .FAQ_content{
    margin-left: 232px;
    p.title{
      color: #363434;
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 16px;
  
    }
    
    p.title_bottom{
      margin-top: 16px;
      color: #666666;
      font-size: 14px;
      margin-left: 32px;
      font-weight: normal;
      span{
        color: #0B95FD;
        cursor: pointer;
        &:hover{
          color: #047ad4;
        }
      }
      &:last-of-type{
        margin-bottom: 0;
      }
    }


  }
  .FAQ_item_content{
    background: #ffffff;
    padding: 24px 64px;

  }
  .el-menu.FAQ_menu{
    display: none;
  }
  .el-collapse{
    border: none;
    padding: 0;
    &:last-of-type{
      .el-collapse-item{
        .el-collapse-item__header{
          border-bottom: none;
        }
      }

    }
    .el-collapse-item{
      &:last-child{
        margin-bottom: 0;
      }
      >div{
        background: #fff;
        padding: 0 32px;
      
        .el-collapse-item__header{
          min-height: 70px;
          height: auto;
          line-height: 1.4;
          font-size: 16px;
          color: #666666;
          padding: 16px 0;
          &:hover{
            color: #363434;
          }

        }
        .el-collapse-item__content{
          padding-bottom: 24px;
          padding-right: 24px;
          p{
            margin-bottom: 16px;
            color: #666666;
            font-size: 14px;
            span.blue{
              color: #0B95FD;
              cursor: pointer;
              &:hover{
                color: #047ad4;
              }
            }
            span.top{
              margin-top: 8px;
              display: block;
            }
            &:last-of-type{
              margin-bottom: 0;
            }
          }
        }
      }
      // &:last-of-type {
      //   .el-collapse-item__header{
      //     border: none;
      //   }
      // }
      &.is-active {
        transform: translate3d(0, 0px, 0);
        box-shadow: 0px 5px 8px rgba(48, 48, 48, 0.04), 0px 4px 8px rgba(48, 48, 48, 0.04);
        .el-collapse-item__header{
          color: #363434;
        }
      }
    }
  }

}
#rampow  #app  #FAQ .el-menu.FAQ_menu_pc{
  width: 100%;
  border-right: none;
  .el-menu-item ,
  .el-submenu__title{
    width: 100%;
    height: 56px;
    line-height: 56px;
    color: #363434;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    min-width: auto;
    &.is-active,
    &:hover{
      font-weight: bold;
      background-color: #ffffff;
    }
  }
  .el-menu-item-group__title{
    padding: 0;
  }
  .el-submenu{
    &.is-active{
      .el-submenu__title{
        font-weight: bold;
      }
    }
  }
}
#rampow  #app  #FAQ .el-menu.FAQ_menu{
  position: fixed;
  top: $menuHeight !important;
  width: 100%;
  padding-left: 20px;
  background-color: transparent;
  background-color: #ffffff;
  .el-submenu ,.el-submenu__title {
    background-color: transparent;
    height: 44px;
    line-height: 44px;
    border: none;
    padding-left: 0;
  }
  .el-submenu__icon-arrow{
    font-size: 16px;
    color: #363434;
  }
}

#rampow .el-menu--horizontal.FAQ_center{
  left: 0 !important;
  width: 100%;
  top: 95px !important;
  z-index: 20 !important;
  ul{
    padding: 0 20px;
    .el-menu-item{
      height: 56px;
      line-height: 56px;
      color: #363434;
      font-size: 14px;
      &:hover{ background-color: transparent;}
      &.is-active{
        font-weight: 700;
      }

    }
  }

}

#FAQ{
  @include respond('768'){
    >div{
      max-width: none;
      padding-top: 0;
    }
    .FAQ_category{
      display: none;

    }
    .FAQ_content{
      margin-left: 0;
      margin: $menuHeight+44px 20px 0;
      padding-top: 16px;
      .title{margin-bottom: 8px;}
      .FAQ_item_content{
        min-height: auto !important;
        padding: 24px 16px;
      }
      p.title_bottom{margin: 16px 16px;}
    }
    .el-menu.FAQ_menu{display: block;}

    .el-collapse{
      .el-collapse-item{
        > div {
          padding: 0 16px;
          .el-collapse-item__header{
            padding: 16px 0;
            min-height: auto;
            font-size: 14px;
            justify-content: space-between;
            .el-collapse-item__arrow{
              margin-left: 16px;
            }
          }
        }
      }

    }
  }
}
